<template>
  <div class="container">
    <iframe
      ref="htmlFrame"
      :src="htmlUrl"
      width="100%"
      height="500px"
      frameborder="0"
      class="border-glow glass-effect"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 外部 HTML 文件的 URL
      htmlUrl: '/数据流(1).html' // 可以是相对路径或绝对 URL
    };
  },
  mounted() {
    // 可以监听 iframe 加载完成事件
    this.$refs.htmlFrame.addEventListener('load', () => {
      console.log('HTML 文件加载完成');
    });
  }
};
</script>
<!-- <template>
  <div ref="charts" style="width: 100%; height:450px;" />
</template>

<script>
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
export default {
  data() {
    return {
      points: [ // 散点图数据 经纬度 颜色
        { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' }}, // 新疆
        { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' }}, // 四川
        { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' }}, // 甘肃
        { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' }}, // 云南
        { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' }} // 广西
      ],
      linesData: [// 线条数据 起始经纬度
        { coords: [[116.407387, 39.904179], [87.628579, 43.793301]] }, // 北京->新疆
        { coords: [[116.407387, 39.904179], [104.076452, 30.651696]] }, // 北京->四川
        { coords: [[116.407387, 39.904179], [103.826777, 36.060634]] }, // 北京->甘肃
        { coords: [[116.407387, 39.904179], [102.709372, 25.046432]] }, // 北京->云南
        { coords: [[116.407387, 39.904179], [108.327537, 22.816659]] } // 北京->广西
      ],
      planePath: // 飞机svg
        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
      systemList: []
    }
  },
  mounted() {
    this.initCharts()
    this.getSystem()
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs['charts'])
      const option = {
        // backgroundColor: '#282C34', // 背景颜色
        geo: { // 地图配置
          map: 'china',
          label: { // 图形上的文本标签
            normal: { // 通常状态下的样式
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 8
              }
            },
            emphasis: { // 鼠标放上去高亮的样式
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: { // 地图区域的样式设置
            normal: { // 通常状态下的样式
              borderColor: '#439CFF',
              borderWidth: 1,
              areaColor: { // 地图区域的颜色
                type: 'radial', // 径向渐变
                x: 0.5, // 圆心
                y: 0.5, // 圆心
                r: 0.8, // 半径
                colorStops: [
                  { // 0% 处的颜色
                    offset: 0,
                    color: '#2A82E4'
                  },
                  { // 100% 处的颜色
                    offset: 1,
                    color: '#2A82E4'
                  }
                ]
              }
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#3867d6',
              borderWidth: 0
            }
          }
        },
        series: [
          { // 散点系列数据
            type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
            coordinateSystem: 'geo', // 该系列使用的坐标系:地理坐标系
            // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
            effectType: 'ripple',
            // 配置何时显示特效。可选'render'和'emphasis' 。
            showEffectOn: 'render',
            rippleEffect: { // 涟漪特效相关配置。
              period: 10, // 动画的周期，秒数。
              scale: 3, // 动画中波纹的最大缩放比例。
              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              brushType: 'stroke'
            },
            zlevel: 1, // 所有图形的 zlevel 值。
            data: this.points
          },
          { // 线条系列数据
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'], // 标记的图形: 箭头
            symbolSize: 10, // 标记的大小
            effect: { // 线条特效的配置
              show: true,
              period: 10, // 特效动画的时间，单位s
              trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
              symbol: 'circle', // 特效图形的标记 可选'circle'等
              symbolSize: 6// 特效标记的大小
            },
            lineStyle: { // 线条样式
              normal: {
                color: '#18dcff',
                width: 2, // 线条宽度
                opacity: 0.6, // 尾迹线条透明度
                curveness: 0.2// 尾迹线条曲直度
              }
            },
            data: this.linesData
          }
        ]
      }
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap('china', china)
      charts.setOption(option)
    }
  }
}
</script>

<style scoped>
.hosts_container {
  background-color: #F7F7F7;
}

.content {
  width: 80%;
}
</style> -->
